<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>部门管理</title>
  <link rel="stylesheet" href="css/dept.css">
</head>

<body>

  <div id="app">
    <div>{{title}}</div>
    <!-- 查询条件 -->
    <div>
      部门名称：<input type="text" v-model="queryInfo.deptName">
      <button @click="query">查询</button>
    </div>

    <!-- 添加部门的部分 -->
    <div>
      <input type="text" v-model="addInfo.deptName" placeholder="名称">
      <input type="text" v-model="addInfo.deptInfo" placeholder="描述">

      <button @click="add">添加</button>
      <!-- {{addInfo}} -->
    </div>

    <!-- 加载状态 -->
    <div v-if="loading">
      数据处理中，请稍候。。。
    </div>

    <!-- 数据呈现部分 -->
    <table v-if="!loading">

      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>描述</th>
          <th>信息修改时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="d in list">
          <td>{{d.deptId}}</td>
          <td>{{d.deptName}}</td>
          <td>{{d.deptInfo}}</td>
          <td>

            {{d.lastupdate}}
            <br>
            {{d.lastupdate | formatDate}}
            <br>
            {{d.lastupdate | formatDate('yyyy年MM月dd日')}}

          </td>
          <td>
            <button @click="del(d)">删除</button>
            <button @click="showModify(d)">修改</button>
          </td>
        </tr>

      </tbody>

    </table>

    <!-- 分页的部分 -->
    <div>
      <a href="javascript:void(0)" @click="toPage(1)">第一页</a>
      |
      <a href="javascript:void(0)" @click="toPage(page.pageNumber-1)">上一页</a>
      |
      当前页/总页数/记录数：{{page.pageNumber}}/{{page.pageCount}}/{{page.total}}
      |
      <a href="javascript:void(0)" @click="toPage(page.pageNumber+1)">下一页</a>
      |
      <a href="javascript:void(0)" @click="toPage(page.pageCount)">最后一页</a>
    </div>

    <!-- 
      v-if,v-show这类可以控制是否显示的元素带上动画样式
      transition是vue扩展的指令
    -->
    <transition name="modi">
      <!-- 修改的部分 -->
      <div v-if="visible">
        <hr>
        <input type="text" v-model="modifyInfo.deptName" placeholder="名称">
        <input type="text" v-model="modifyInfo.deptInfo" placeholder="描述">

        <button @click="modify">修改</button>
        <button @click="visible=false;">关闭</button>
        <hr>
        <!-- {{modifyInfo}} -->
      </div>
    </transition>

    <!-- {{page}} -->

    <!-- {{list}} -->

  </div>

  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../lib/vue.min.js"></script>
  <script src="../js/filters.js"></script>
  <script src="../js/ajax.js"></script>

  <script src="js/dept.js"></script>

</body>

</html>